<template>
  <h1>用户列表</h1>
  <hr />
    <el-table  v-loading="loading" element-loading-text="Loading..." :data="UserData" style="width: auto" height="100%">
    <el-table-column fixed prop="userid" label="用户ID" width="240" />
    <el-table-column prop="tel" label="电话号码" width="180" />
    <el-table-column prop="telcode" label="电话代码" width="140" />
    <el-table-column prop="nickname" label="用户昵称" width="140" />
    <el-table-column prop="avatar" label="头像" width="280" >
      <template #default="scope">
        <img class="img" :src="scope.row.avatar" alt="头像显示不出来" />
      </template>
    </el-table-column>
    <el-table-column prop="caeateTime" label="创建时间" width="180" >
      <template #default="scope">
            <span v-if="scope.row.createTime!= null">
              {{ parseTime(scope.row.createTime ) }}
            </span>
          </template>
      </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
// 导入封装好的axios,发送请求
import { onMounted, reactive,ref } from 'vue';
import { user_list } from '../../../utils/api';
// 定义数据类型
interface Iuser{
  userid:string,
  tel:string,
  telcode:string,
  nickname:string,
  avatar:string,
  createTime:string
}
// 定义一个日期类型
onMounted(()=>{
  var time= new Date('1655943653013')
  console.log(time) 
})
const loading = ref(true)
// 定义变量用来接收数据
let UserData=reactive<Iuser[]>([])
// 发送请求
user_list().then(res=>{
  console.log(res.data.data)
  UserData.push(...res.data.data)
  loading.value=false
})
// 定义一个函数，作用是将时间戳的字符串转换为日期类型
const parseTime=(val:number)=>{
  let value=Number(val)
  console.log(val)
  let date = new Date(value);
  let y = date.getFullYear();
  let MM = date.getMonth() + 1 ;
  MM = MM < 10 ? ('0'+MM) as unknown as number : MM;
  let d = date.getDate();
  d = d < 10 ? ('0' + d) as unknown as number : d;
  let h = date.getHours();
  h = h < 10 ? ('0' + h) as unknown as number : h;
  let m = date.getMinutes();
  m = m < 10 ? ('0' + m) as unknown as number : m;
  let s = date.getSeconds();
  s = s < 10 ? ('0' + s) as unknown as number : s;
  return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
};

</script>

<style>
</style>